import React, {useEffect} from 'react';
import {login,logout} from "@/api/user.ts";
import PropTypes from 'prop-types';
import { useSelector, useDispatch } from 'react-redux';
// 引入actions
import { increment, decrement,asyncIncrement } from '@/store/features/userSlice.ts';
import {Button} from "antd";
import './index.scss'

SignIn.propTypes = {

};

function SignIn(props) {
    const { level } = useSelector((state) => state.user);
    const dispatch = useDispatch();

    useEffect(()=>{
        login({}).then((res)=>{
            console.log(res)
            localStorage.setItem('token','6')
        });
        logout({}).then((res)=>{
            console.log(res)
        })
    },[])
    return (
        <div className='rt-signIn flex justify-center items-center dark:bg-rose-900'>
            <div>
                <div className='rt-signIn__title'>
                    hello，
                </div>
                <div className='dark:text-red'>
                    这是登录页面
                </div>
                <div>level: {level}</div>
                <div className='flex gap-3'>
                    <Button onClick={() => {
                        dispatch(increment({ level: 2 })); // dispatch派发action
                    }}>level + 2</Button>
                    <Button onClick={() => {
                        dispatch(asyncIncrement({ level: 2 }));
                    }}>level + 2</Button>
                    <Button onClick={() => {
                        dispatch(decrement()); // dispatch派发action
                    }}>level - 1</Button>
                </div>
            </div>
        </div>

    );
}

export default SignIn;